<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 

<div class="content">
    {% if hasInstructorPermission %}
        <div style="float: right; margin-bottom: 20px;">
            <a onclick="newUploadImagesForm()" class="btn btn-primary">Upload Student Photos</a>
        </div>
    {% endif %}
    <h1>Student Photos</h1>
    {# This is a layout table #}
    <table class="table table-bordered persist-area">
        {% if sections|length > 0 %}
            {% for registration, students in sections %}
                <tr class="info">
                    <td colspan="8" style="text-align: center">Students Enrolled in Registration Section {{ registration }}</td>
                </tr>
                <tbody id="section-{{ registration }}">
                {% for student in students %}
                    {% if loop.index % 5 == 1 %}
                        <tr id="user-{{ student.getId() }}">
                    {% endif %}
                    {% if imageData[student.getId()] is defined %}
                        <td>{{ base64_image(imageData[student.getId()].path, student.getId()) }}
                        <div class="name"><br /><br />{{student.getDisplayedFirstName()}} {{student.getDisplayedLastName()}}
                        <br />{{student.getId()}}</div>
                        </td>
                    {% else %}
                        {% if errorImageData == '_NONE_' %}
                            <td><i><font color="gray"><img alt="No Image Available" /></font></i>
                            <div class="name"><br />
                        {% else %}
                            <td>{{ base64_image(errorImageData.path, 'No Image Available') }}
                            <div class="name"><br /><br />
                        {% endif %}
                        {{student.getDisplayedFirstName()}} {{student.getDisplayedLastName()}}
                        <br />{{student.getId()}}</div>
                        </td>
                    {% endif %}
                    {% if loop.index % 5 == 0 %}
                        </tr>
                    {% endif %}
                    {% flush %}
                {% endfor %}
                </tbody>
            {% endfor %}
        {% else %}
            <tr>
                <td colspan="8">No students found</td>
            </tr>
        {% endif %}
    </table>
</div>
{% include('grading/UploadImagesForm.twig') %}
